<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { RouterView } from 'vue-router'
import { HomeFilled, MapLocation, User, Share, Setting, InfoFilled, Message, ArrowDown } from '@element-plus/icons-vue'
import NotFound from './view/NotFound.vue'

const timeout = ref(false)
const router = useRouter()
const isMenuOpen = ref(false)
const address = ref('东京都')
const showCityPicker = ref(false)

const cities = [
  { name: '东京都', districts: ['千代田区', '中央区', '港区', '新宿区'] },
  { name: '大阪府', districts: ['大阪市', '堺市', '池田市', '豊中市'] },
  { name: '京都市', districts: ['中京区', '東山区', '下京区', '右京区'] },
  { name: '札幌市', districts: ['中央区', '北区', '東区', '白石区'] },
  { name: '福冈市', districts: ['中央区', '博多区', '南区', '西区'] }
]

const selectedCity = ref(cities[0])
const showDistrictPicker = ref(false)

function openMenu() {
  isMenuOpen.value = !isMenuOpen.value
}

function toggleCityPicker() {
  showCityPicker.value = !showCityPicker.value
  showDistrictPicker.value = false
}

function selectCity(city) {
  selectedCity.value = city
  address.value = city.name
  showCityPicker.value = false
}

function selectDistrict(district) {
  address.value = `${selectedCity.value.name} ${district}`
  showDistrictPicker.value = false
}

onMounted(() => {
  // 5秒后显示NotFound组件，防止路由卡死
  const timeoutId = setTimeout(() => {
    timeout.value = true
  }, 5000)

  router.isReady().then(() => {
    clearTimeout(timeoutId)
  })
})
</script>

<template>
  <div class="app">
    <!-- 顶部导航栏 -->
    <header class="header" v-if="!$route.meta.hideNavigation">
      <nav>
        <div class="icon-left">
          <el-icon class="icon menu-icon" @click="openMenu()">
            <Share />
          </el-icon>
        </div>
        <h1 class="title">MochiMap</h1>
        <div class="address-selector">
          <div class="address-box" @click.stop="toggleCityPicker">
            <el-icon class="icon map-icon">
              <MapLocation />
            </el-icon>
            <span class="address-text">{{ address }}</span>
            <el-icon class="icon arrow-icon" :class="{ 'rotate': showCityPicker }">
              <ArrowDown />
            </el-icon>
          </div>

          <!-- 城市选择菜单 -->
          <div class="city-picker" v-if="showCityPicker" @click.stop>
            <div class="city-item" v-for="city in cities" :key="city.name" @click="selectCity(city)">
              {{ city.name }}
              <el-icon class="right-arrow" v-if="city.districts">
                <ArrowDown />
              </el-icon>
            </div>
          </div>

          <!-- 区域选择菜单 -->
          <div class="district-picker" v-if="showDistrictPicker" @click.stop>
            <div class="district-item" v-for="district in selectedCity.districts" :key="district"
              @click="selectDistrict(district)">
              {{ district }}
            </div>
          </div>
        </div>
      </nav>
    </header>

    <!-- 主内容区 -->
    <main class="main">
      <RouterView v-if="!timeout" />
      <NotFound v-else />
    </main>

    <!-- 底部导航栏 -->
    <footer class="bottom" v-if="!$route.meta.hideNavigation">
      <nav class="bottom-nav">
        <div 
        class="nav-item"
        :class="{ 'active': $route.path === '/main' }"
        @click="$router.push('/main')"
        >
            <el-icon :size="20" class="icon">
              <HomeFilled />
            </el-icon>
          <span>首页</span>
        </div>
        <div 
        class="nav-item"
        :class="{ 'active': $route.path === '/recommend' }"
        @click="$router.push('/recommend')"
        >
          <el-icon :size="20" class="icon">
            <MapLocation />
          </el-icon>
          <span>推荐</span>
        </div>
        <div 
        class="nav-item"
        :class="{ 'active': $route.path === '/find' }"
        @click="$router.push('/find')"
        >
          <el-icon :size="20" class="icon">
            <Share />
          </el-icon>
          <span>发现</span>
        </div>
        <div 
        class="nav-item"
        :class="{ 'active': $route.path === '/order' }"
        @click="$router.push('/order')"
        >
          <el-icon :size="20" class="icon">
            <Message />
          </el-icon>
          <span>订单</span>
        </div>
        <div 
        class="nav-item"
        :class="{ 'active': $route.path === '/owner' }"
        @click="$router.push('/owner')"
        >
          <el-icon :size="20" class="icon">
            <User />
          </el-icon>
          <span>我的</span>
        </div>
      </nav>
    </footer>

    <!-- 阴影遮罩层 -->
    <div class="overlay" v-if="isMenuOpen" @click="openMenu"></div>

    <!-- 左侧导航栏 -->
    <div class="menu" :class="{ 'menu-open': isMenuOpen }">
      <div class="menu-header">
        <h2>日游用户</h2>
      </div>
      <div class="menu-content">
        <div class="menu-item">
          <el-icon>
            <HomeFilled />
          </el-icon>
          <span>首页</span>
        </div>
        <div class="menu-item">
          <el-icon>
            <MapLocation />
          </el-icon>
          <span>地图探索</span>
        </div>
        <div class="menu-item">
          <el-icon>
            <Setting />
          </el-icon>
          <span>设置</span>
        </div>
        <div class="menu-item">
          <el-icon>
            <InfoFilled />
          </el-icon>
          <span>关于我们</span>
        </div>
        <div class="menu-item">
          <el-icon>
            <Message />
          </el-icon>
          <span>联系我们</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333;
  position: relative;
  overflow-x: hidden;
}

/* 顶部导航栏样式*/
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  padding: 0 16px;
  height: 60px;
  display: flex;
  align-items: center;
}

.header nav {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.title {
  position: relative;
  left: 7%;
  margin: 0;
  flex-grow: 1;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  letter-spacing: 1px;
}

.icon {
  font-size: 20px;
  transition: all 0.3s ease;
}

.menu-icon {
  color: #fff;
  font-size: 45px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  top: 3px;
  background: rgba(255, 255, 255, 0.267);
  /* 阴影 */
  box-shadow: 0 2px 10px rgba(219, 190, 190, 0.503);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


.menu-icon:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* 地址选择器样式 */
.address-selector {
  position: relative;
  display: inline-block;
}

.address-box {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.address-box:hover {
  background: rgba(255, 255, 255, 0.4);
}

.map-icon {
  color: #fff;
  font-size: 18px;
  margin-right: 6px;
}

.address-text {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.arrow-icon {
  color: #fff;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.arrow-icon.rotate {
  transform: rotate(180deg);
}

.city-picker,
.district-picker {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  margin-top: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.city-item,
.district-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.city-item:hover,
.district-item:hover {
  background: #f5f5f5;
}

.right-arrow {
  font-size: 12px;
  color: #999;
}

.district-picker {
  left: 200px;
  top: 0;
}

/* 主内容区样式 */
.main {
  flex: 1;
  background: #f8f8f8;
  -webkit-overflow-scrolling: touch;
}

/* 底部导航栏样式 */
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  height: 56px;
  z-index: 100;
}

.bottom-nav {
  display: flex;
  height: 100%;
  justify-content: space-around;
  align-items: center;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
  flex: 1;
}

.nav-item.active .icon,
.nav-item.active span {
  color: #ff9a9e;
}

.nav-item .icon {
  margin-bottom: 4px;
  color: #ff9a9e;
}

.nav-item.active {
  color: #ff9a9e;
}

/* 左侧菜单栏样式 */
.menu {
  position: fixed;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: #ffffff;
  z-index: 200;
  transition: transform 0.3s ease;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.menu-open {
  transform: translateX(100%);
}

.menu-header {
  padding: 16px;
  background: #ff9a9e;
  color: white;
}

.menu-header h2 {
  margin: 0;
  font-size: 18px;
}

.menu-content {
  padding: 16px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.menu-item .el-icon {
  margin-right: 10px;
  font-size: 18px;
  color: #666;
}

.menu-item span {
  font-size: 16px;
}

/* 阴影遮罩层 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
</style>
